<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="/StudentInfo/utils/image/favicon.ico" type="image/x-icon" />
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <script type="text/javascript" src="/StudentInfo/utils/js/jquery-3.3.1.min.js"></script>
    <!-- Loading Bootstrap -->
    <link href="/StudentInfo/utils/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!-- Loading Flat UI Pro -->
    <link href="/StudentInfo/utils/css/flat-ui.css" rel="stylesheet">
    <!-- Loading Flat UI JS -->
    <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                $("#sid").change(
                    function() {
                        $.post("/StudentInfo/AjaxHandler/existSid?sid=" +
                            $("#sid").val(),
                            function(data, status) {
                                $("#countsid").html(data);
                            })

                    })

            })
    </script>
    <script type='text/javascript' src='/StudentInfo/utils/scripts/particles.js'></script>
    <link href="/StudentInfo/utils/css/animate.css" rel="stylesheet">
</head>

<body>
    <div id="particles-js"><canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas></div>
    <jsp:include page="adminLeft.jsp" />
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h5>添加学生</h5>
                <form action="/StudentInfo/AdminHandler/addStudent" method="post" name="form1">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>学号</h6>
                            <input type="text" name="sid" id="sid" class="form-control" oninput="value=value.replace(/[^\d]/g,'')" maxlength="12"></input>
                            <span id="countsid" style="color: #ff0000;"></span>
                            <h6>姓名</h6>
                            <input type="text" name="sname" class="form-control" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" maxlength="4"></input>
                            <h6>身份证号</h6>
                            <input type="text" name="sidcard" class="form-control" oninput="value=value.replace(/[^\d]/g,'')" maxlength="16"></input>
                            <h6>性别</h6>

                            <label class="radio" for="radio1"> <input type="radio"
								name="ssex" value="男" id="radio1" data-toggle="radio"
								class="custom-radio"> <span class="icons"> <span
									class="icon-unchecked"></span> <span class="icon-checked"></span>
							</span> <font style="vertical-align: inherit;"> <font
									style="vertical-align: inherit;"> 男 </font>
							</font>
							</label> <label class="radio" for="radio2"> <input type="radio"
								name="ssex" value="女" id="radio2" data-toggle="radio"
								class="custom-radio"> <span class="icons"> <span
									class="icon-unchecked"></span> <span class="icon-checked"></span>
							</span> <font style="vertical-align: inherit;"> <font
									style="vertical-align: inherit;"> 女 </font>
							</font>
							</label>

                            <h6>密&nbsp;&nbsp;码</h6>
                            <input type="password" name="spassword" class="form-control" onkeyup="this.value=this.value.replace(/(^\s+)|(\s+$)/g,'');" maxlength="16" />
                        </div>
                        <div class="col-md-6">
                            <h6>年龄</h6>
                            <input type="text" name="sage" class="form-control" maxlength="2"></input>


                            <h6>专业</h6>
                            <select name="profession" class="form-control select select-primary select-block mbl" id="belongcoll">
								<option value="">-请选择学院-</option>
							</select>

                            <h6>学院</h6>
                            <select name="college" class="form-control select select-primary select-block mbl" id="belongpro">
								<option value="">-请选择专业-</option>
							</select>

                            <h6>班级</h6>
                            <select name="classr" class="form-control select select-primary select-block mbl" id="belongcla">
								<option value="">-请选择班级-</option>
							</select>

                        </div>
                        <div class="col-md-12">
                            <br> <input type="submit" class="btn btn-primary btn-wide login-btn" value="添加" />
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
    <script src="/StudentInfo/utils/scripts/bganimation.js"></script>


    <script type="text/javascript">
        $("form").submit(function() {
            //当表单提交的时候，对字段验证，并根据需要放出提示
            if ($.trim($("#belongcoll").val()) == "") {
                alert("学院不能为空");
                return false; //终止表单提交

            } else if ($.trim($("#belongpro").val()) == "") {
                alert("专业不能为空");
                return false; //终止表单提交

            } else if ($.trim($("#belongcla").val()) == "") {
                alert("班级不能为空");
                return false; //终止表单提交

            }
        });


        var arr_belongcoll = ["计算机学院", "建筑学院", "外国语学院", "人文学院"];
        var arr_belongpro = [
            ["网络工程", "软件工程", "物联网", "信息管理"],
            ['土木工程', '测绘工程', '工程造价', '城市规划'],
            ['英语', '日语', '俄语', '西班牙语'],
            ['汉语言', '历史', '新闻', '网络新媒体']
        ];
        var arr_belongcla = [
            [
                ["网络B151", "网络B152", "网络B161", "网络B162", "网络B171", "网络B172"],
                ["软件B151", "软件B152", "软件B161", "软件B162", "软件B171", "软件B172"],
                ["物联B151", "物联B152", "物联B161", "物联B162", "物联B171", "物联B172"],
                ["信管B151", "信管B152", "信管B161", "信管B162", "信管B171", "信管B172"]

            ],
            [
                ["土木B151", "土木B152", "土木B161", "土木B162", "土木B171", "土木B172"],
                ["测绘B151", "测绘B152", "测绘B161", "测绘B162", "测绘B171", "测绘B172"],
                ["造价B151", "造价B152", "造价B161", "造价B162", "造价B171", "造价B172"],
                ["规划B151", "规划B152", "规划B161", "规划B162", "规划B171", "规划B172"]

            ],
            [
                ["英语B151", "英语B152", "英语B161", "英语B162", "英语B171", "英语B172"],
                ["日语B151", "日语B152", "日语B161", "日语B162", "日语B171", "日语B172"],
                ["俄语B151", "俄语B152", "俄语B161", "俄语B162", "俄语B171", "俄语B172"],
                ["牙语B151", "牙语B152", "牙语B161", "牙语B162", "牙语B171", "牙语B172"]

            ],
            [
                ["汉语B151", "汉语B152", "汉语B161", "汉语B162", "汉语B171", "汉语B172"],
                ["历史B151", "历史B152", "历史B161", "历史B162", "历史B171", "历史B172"],
                ["新闻B151", "新闻B152", "新闻B161", "新闻B162", "新闻B171", "新闻B172"],
                ["网媒B151", "网媒B152", "网媒B161", "网媒B162", "网媒B171", "网媒B172"]

            ]
        ];

        var ocoll = document.getElementById("belongcoll");
        var opro = document.getElementById("belongpro");
        var ocla = document.getElementById("belongcla");


        var quanju_arr; //创建一个全局对象，用于存储一个中间数组

        function input_arr(arr, event) { //封装一个函数，用于向下拉栏中添加元素
            for (var i = 0; i < arr.length; i++) { //下拉栏内的元素来源于数组中的元素，遍历数组
                var option = new Option(arr[i], i); //创建Option对象（这个O要大写），存入值
                event.appendChild(option); //把option添加到event对象的末尾
            }
        }

        input_arr(arr_belongcoll, ocoll); //调用,给省下拉栏添元素

        ocoll.onchange = function() { //给下拉栏绑定事件（当下拉栏元素改变时执行）
            opro.options.length = 1; //当省下拉栏改变时，清空市的下拉栏内元素
            ocla.options.length = 1; //当省下拉栏改变时，清空县的下拉栏内元素
            var index = this.value; //每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
            var arr_pro_next = arr_belongpro[index]; //获取当前选择省的市元素并赋给一个数组
            quanju_arr = arr_belongcla[index]; //获取当前选择省中市的县元素并赋给定义的中间数组
            input_arr(arr_pro_next, opro); //调用,给市下拉栏添元素
        }

        opro.onchange = function() {
            ocla.options.length = 1;
            var index = this.value;
            var arr_cla_next = quanju_arr[index];
            input_arr(arr_cla_next, ocla); //调用,给县下拉栏添元素
        }
    </script>
    <script>
        $("select").select2({
            dropdownCssClass: 'dropdown-inverse'
        });
    </script>
</body>

</html>